<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('编辑开店申请信息')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-shop-edit" th:object="${shop}">
        <input name="id" type="hidden" th:field="*{id}"/>
        <h4 class="form-header h4">状态信息</h4>
        <th:block th:if="*{reviewStatus == 1}">
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>店铺状态：</label>
                        <div class="col-sm-8">
                            <div class="radio-box" th:each="dict : ${@dict.getType('open_status')}">
                                <input type="radio" th:id="${dict.dictCode}" name="isEnable"
                                       th:value="${dict.dictValue}"
                                       th:field="*{isEnable}">
                                <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </th:block>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>审核状态：</label>
                    <div class="col-sm-8">
                        <div class="radio-box" th:each="dict : ${@dict.getType('shop_review_status')}">
                            <input type="radio" th:id="${dict.dictCode}" name="reviewStatus"
                                   th:value="${dict.dictValue}"
                                   th:field="*{reviewStatus}">
                            <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">站点信息</h4>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>店铺名称：</label>
                    <div class="col-sm-8">
                        <input id="shopName" name="shopName" placeholder="请输入店铺名称" class="form-control"
                               type="text" maxlength="50" th:value="*{shopName}"
                               required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label">店铺昵称：</label>
                    <div class="col-sm-4">
                        <input id="shopCode" name="shopCode" placeholder="请输入店铺昵称" class="form-control"
                               type="text" maxlength="50" th:value="*{shopCode}">
                    </div>
                </div>
            </div>
        </div>
        <th:block th:if="*{reviewStatus == 1}">
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">店铺地址：</label>
                        <div class="col-sm-8">
                            <input name="shopAddress" placeholder="请输入店铺地址" class="form-control" type="text"
                                   th:value="*{shopAddress}"
                                   maxlength="100">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">站点LOGO：</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="file" id="imageBtn" name="imageBtn"
                                   onchange="uploadLogo(21)"/>
                            <input class="form-control" name="shopLogo" id="shopLogo" th:value="*{shopLogo}"
                                   type="hidden">
                        </div>
                    </div>
                </div>
            </div>
        </th:block>
        <h4 class="form-header h4">联系人信息</h4>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>开店人姓名：</label>
                    <div class="col-sm-8">
                        <input name="applicantName" placeholder="请输入姓名" class="form-control"
                               type="text" maxlength="50" th:value="*{applicantName}" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>开店人手机号码：</label>
                    <div class="col-sm-8">
                        <input name="applicantPhone" placeholder="请输入手机号码" class="form-control"
                               type="text" maxlength="50" th:value="*{applicantPhone}" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>开店人邮箱：</label>
                    <div class="col-sm-8">
                        <input name="applicantEmail" placeholder="请输入邮箱" class="form-control"
                               type="text" maxlength="50" th:value="*{applicantEmail}">
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">其他</h4>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label">统一社会信用代码：</label>
                    <div class="col-sm-8">
                        <input name="businessLicenceNum" placeholder="请输入统一社会信用代码" class="form-control" type="text"
                               th:value="*{businessLicenceNum}" maxlength="30">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label">店铺营业执照副本：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="file" id="imageBtn2" name="imageBtn2"
                               onchange="uploadBusinessLicenceImg(12)"/>
                        <input class="form-control" name="businessLicenceImg" th:value="*{businessLicenceImg}"
                               id="businessLicenceImg" type="hidden">
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4"></h4>
        <div class="row">
            <div class="col-sm-offset-3">
                <button type="button" class="btn btn-sm btn-success" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-remove"></i>关 闭</button>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>


<script type="text/javascript">
    var prefix = ctx + "back/shop";

    var initData = {
        shopLogo: $("#shopLogo").val(),
        businessLicenceImg: $("#businessLicenceImg").val(),
    };

    $("#form-shop-edit").validate({
        onkeyup: false,
        rules: {
            shopName: {
                remote: {
                    url: prefix + "/checkShopNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "shopId": function () {
                            return $("#id").val();
                        },
                        "shopName": function () {
                            return $.common.trim($("#shopName").val());
                        },
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            shopCode: {
                remote: {
                    url: prefix + "/checkShopCodeUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "shopId": function () {
                            return $("#id").val();
                        },
                        "shopCode": function () {
                            return $.common.trim($("#shopCode").val());
                        },
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
        },
        messages: {
            "shopCode": {
                remote: "店铺昵称已存在"
            }
        },
        focusCleanup: true
    });

    //上传图片文件
    $("#imageBtn").fileinput({
        language: 'zh', //设置语言
        dropZoneTitle: '拖拽文件到这里 &hellip;<br>仅支持上传一张图片<br>多次上传替换前一张图片',
        allowedFileExtensions: ['jpg', 'png', 'bmp', 'jpeg'],//接收的文件后缀
        showUpload: false, //是否上传文件
        showRemove: true,
        dropZoneEnabled: true,//是否显示拖拽区域
        initialPreview: '<img src="' + initData.shopLogo + '" class="file-preview-image" width="100%" height="auto" max-height="100%" alt="站点LOGO" title="站点LOGO">',
        initialPreviewFileType: 'images',// 文件类型: 图片为images 其他为object
        maxFileCount: 1,
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
    }).on('fileclear', function (event, id) {
        $.modal.alertSuccess("删除站点LOGO成功！")
        $("#shopLogo").val('');
    });

    //上传图片文件
    $("#imageBtn2").fileinput({
        language: 'zh', //设置语言
        dropZoneTitle: '拖拽文件到这里 &hellip;<br>仅支持上传一张图片<br>多次上传替换前一张图片',
        allowedFileExtensions: ['jpg', 'png', 'bmp', 'jpeg'],//接收的文件后缀
        showUpload: false, //是否上传文件
        showRemove: true,
        dropZoneEnabled: true,//是否显示拖拽区域
        initialPreview: '<img src="' + initData.businessLicenceImg + '" class="file-preview-image" width="100%" height="auto" max-height="100%" alt="营业执照" title="营业执照">',
        initialPreviewFileType: 'images',// 文件类型: 图片为images 其他为object
        maxFileCount: 1,
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
    }).on('fileclear', function (event, id) {
        $.modal.alertSuccess("删除营业执照成功！")
        $("#businessLicenceImg").val('');
    });

    //通用上传文件
    function ajaxUploadFile(callback, file, modelType) {
        var formdata = new FormData();
        formdata.append("file", file);
        formdata.append("modelType", modelType);
        $.modal.loading("上传中...");
        $.ajax({
            url: ctx + "back/upload/image",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function (result) {
                $.modal.closeLoading();
                callback(result);
            },
            error: function () {
                $.modal.closeLoading();
                $.modal.alertWarning("图片上传失败");
            }
        })
    }

    function uploadBusinessLicenceImg(modelType) {
        var files = document.getElementById('imageBtn2');
        if (files) {
            ajaxUploadFile(function (result) {
                if (result.code == 0) {
                    $.modal.alertSuccess("上传营业执照成功！")
                } else {
                    $.modal.alertError("上传图片失败，请重试");
                }
                $("#businessLicenceImg").val(result.url);
            }, files.files[0], modelType);
        }
    }

    //公司logo上传
    function uploadLogo(modelType) {
        var files = document.getElementById('imageBtn');
        if (files) {
            ajaxUploadFile(function (result) {
                if (result.code == 0) {
                    $.modal.alertSuccess("上传站点LOGO成功！")
                } else {
                    $.modal.alertError("上传图片失败，请重试");
                }
                $("#shopLogo").val(result.url);
            }, files.files[0], modelType);
        }
    }


    function submitHandler() {
        if ($.validate.form()) {
            $.operate.saveModal(prefix + "/edit", $('#form-shop-edit').serialize());
        }
    }
</script>
</body>
</html>
